import JQuery from 'jquery';
import util from '@/js/util/util.js';
import store from '@/js/store/map/index.js';
import Vue from 'vue';

let attribute = {
    setAttribute: function(element) {
        if (!element.style.hasOwnProperty('fontFamily')) {
            Vue.set(element.style, 'fontFamily', 'inherit');
        }
        if (element.component === 'VText' || 
            element.component === 'Shape' || 
            (element.component === 'BoxModel' && element.attribute.tag ==='11') || 
            element.component === 'Decoration' && (element.attribute.tag === '7' || element.attribute.tag === '9' || element.attribute.tag === '11')) {
            this.setValue(this.getFontSizeName(), element.style.fontSize);
            this.setValue(this.getLineHeightName(), element.style.lineHeight);
            this.setValue(this.getTextName(), element.data.text);
            this.setValue(this.getFontWeightName(), element.style.fontWeight);
            this.setValue(this.getLetterSpacingName(), element.style.letterSpacing);
            this.setValue(this.getFontFamilyName(), element.style.fontFamily);
       
            this.setValue(this.getTextShadowLevelName(), element.style.textShadow.level);
            this.setValue(this.getTextShadowVerticalName(), element.style.textShadow.vertical);
            this.setValue(this.getTextShadowBlurName(), element.style.textShadow.blur);
        }
        if (element.component === 'Menu') {
            this.setValue(this.getFontWeightName(), element.style.fontWeight);
            this.setValue(this.getFontFamilyName(), element.style.fontFamily);

            this.setValue(this.getTextShadowLevelName(), element.style.textShadow.level);
            this.setValue(this.getTextShadowVerticalName(), element.style.textShadow.vertical);
            this.setValue(this.getTextShadowBlurName(), element.style.textShadow.blur);
        }
        if (element.component === 'VButton') { 
            this.setValue(this.getFontSizeName(), element.style.fontSize);
            this.setValue(this.getLineHeightName(), element.style.lineHeight);
            this.setValue(this.getTextName(), element.data.text);
            this.setValue(this.getFontWeightName(), element.style.fontWeight);
            this.setValue(this.getLetterSpacingName(), element.style.letterSpacing);
            this.setValue(this.getFontFamilyName(), element.style.fontFamily);
            
            this.setValue(this.getTextShadowLevelName(), element.style.textShadow.level);
            this.setValue(this.getTextShadowVerticalName(), element.style.textShadow.vertical);
            this.setValue(this.getTextShadowBlurName(), element.style.textShadow.blur);
        }
        if (element.component === 'CarouselText') { 
            this.setValue(this.getFontSizeName(), element.style.fontSize);
            this.setValue(this.getLineHeightName(), element.style.lineHeight);
            this.setValue(this.getTextName(), element.data.text);
            this.setValue(this.getFontWeightName(), element.style.fontWeight);
            this.setValue(this.getLetterSpacingName(), element.style.letterSpacing);
            this.setValue(this.getFontFamilyName(), element.style.fontFamily);

            this.setValue(this.getTextShadowLevelName(), element.style.textShadow.level);
            this.setValue(this.getTextShadowVerticalName(), element.style.textShadow.vertical);
            this.setValue(this.getTextShadowBlurName(), element.style.textShadow.blur);
        }
        if (element.component === 'Time') { 
            this.setValue(this.getFontSizeName(), element.style.fontSize);
            this.setValue(this.getLineHeightName(), element.style.lineHeight);
            this.setValue(this.getFontWeightName(), element.style.fontWeight);
            this.setValue(this.getLetterSpacingName(), element.style.letterSpacing);
            this.setValue(this.getFontFamilyName(), element.style.fontFamily);

            this.setValue(this.getTextShadowLevelName(), element.style.textShadow.level);
            this.setValue(this.getTextShadowVerticalName(), element.style.textShadow.vertical);
            this.setValue(this.getTextShadowBlurName(), element.style.textShadow.blur);
        }
        if (element.component === 'Statistic05') { 
            this.setValue(this.getFontSizeName(), element.style.fontSize);
            this.setValue(this.getLineHeightName(), element.style.lineHeight);
            this.setValue(this.getTextName(), element.data.text);
            this.setValue(this.getFontWeightName(), element.style.fontWeight);
            this.setValue(this.getLetterSpacingName(), element.style.letterSpacing);
            this.setValue(this.getFontFamilyName(), element.style.fontFamily);

            this.setValue(this.getTextShadowLevelName(), element.style.textShadow.level);
            this.setValue(this.getTextShadowVerticalName(), element.style.textShadow.vertical);
            this.setValue(this.getTextShadowBlurName(), element.style.textShadow.blur);
        }
    },
    setValue: function(id, value) {
        let obj = JQuery('#' + id);
        obj.val(value);
    },
    getFontFamilyName: function() {
        return window.getRootName() + 'STYLE_FONTFAMILY_VALUE';
    },
    getFontSizeName: function() {
        return window.getRootName() + 'STYLE_FONTSIZE_VALUE';
    },
    getLineHeightName: function() {
        return window.getRootName() + 'STYLE_LINEHEIGHT_VALUE';
    },
    getLetterSpacingName: function() {
        return window.getRootName() + 'STYLE_LETTERSPACING';
    },
    getFontWeightName: function() {
        return window.getRootName() + 'STYLE_FONTWEIGHT';
    },
    getTextName: function() {
        return window.getRootName() + 'DATA_TEXT';
    },
    getTextShadowLevelName: function() {
        return window.getRootName() + 'STYLE_TEXTSHADOW_LEVEL';
    },
    getTextShadowVerticalName: function() {
        return window.getRootName() + 'STYLE_TEXTSHADOW_VERTICAL';
    },
    getTextShadowBlurName: function() {
        return window.getRootName() + 'STYLE_TEXTSHADOW_BLUR';
    },
    setFontFamilyValue: function(element, value, updateInput = true) {
        element.style.fontFamily = value;
        updateInput && this.setValue(this.getFontFamilyName(), element.style.fontFamily);
    },
    setFontSizeValue: function(element, value, updateInput = true) {
        element.style.fontSize = value;
        updateInput && this.setValue(this.getFontSizeName(), element.style.fontSize);
    },
    setLineHeightValue: function(element, value, updateInput = true) {
        element.style.lineHeight = value;
        updateInput && this.setValue(this.getLineHeightName(), element.style.lineHeight);
    },
    setLetterSpacing: function(element, value, updateInput = true) {
        element.style.letterSpacing = value;
        updateInput && this.setValue(this.getLetterSpacingName(), element.style.letterSpacing);
    },
    setFontWeight: function(element, value, updateInput = true) {
        element.style.fontWeight = +value;
        updateInput && this.setValue(this.getFontWeightName(), element.style.fontWeight);
    },
    setText: function(element, value, updateInput = true) {
        element.data.text = value;
        updateInput && this.setValue(this.getTextName(), element.data.text);
    },
    setTextAlign: function(element, value) {
        element.style.textAlign = value;
    },
    setVerticalAlign: function(element, value) {
        element.style.verticalAlign = value;
    },
    setStyleColor: function(element, value) {
        element.style.color = util.isBlank(value) ? '#FFFFFFFF' : util.rgbaToHexColor(value);
    },
    setTextShadowLevel: function(element, value, updateInput = true) {
        if (value === '') {
            if (element.style.textShadow.level !== '') {
                store.commit('setValidateHistory', { type: 'style.textShadow.level', value: element.style.textShadow.level });
            } else {
                store.commit('setValidateHistory', { type: 'style.textShadow.level', value: 0 });
            }
        } else {
            store.commit('setValidateHistory',{ type: 'style.textShadow.level', value: '', flag: true });
        }
        element.style.textShadow.level = value;
        (updateInput) && this.setValue(this.getTextShadowLevelName(), element.style.textShadow.level);
    },
    setTextVertical: function(element, value, updateInput = true) {
        if (value === '') {
            if (element.style.textShadow.vertical !== '') {
                store.commit('setValidateHistory', { type: 'style.textShadow.vertical', value: element.style.textShadow.vertical });
            } else {
                store.commit('setValidateHistory', { type: 'style.textShadow.vertical', value: 0 });
            }
        } else {
            store.commit('setValidateHistory',{ type: 'style.textShadow.vertical', value: '', flag: true });
        }
        element.style.textShadow.vertical = value;
        (updateInput) && this.setValue(this.getTextShadowVerticalName(), element.style.textShadow.vertical);
    },
    setTextShadowBlur: function(element, value, updateInput = true) {
        if (value === '') {
            if (element.style.textShadow.blur !== '') {
                store.commit('setValidateHistory', { type: 'style.textShadow.blur', value: element.style.textShadow.blur });
            } else {
                store.commit('setValidateHistory', { type: 'style.textShadow.blur', value: 0 });
            }
        } else {
            store.commit('setValidateHistory',{ type: 'style.textShadow.blur', value: '', flag: true });
        }
        element.style.textShadow.blur = value;
        (updateInput) && this.setValue(this.getTextShadowBlurName(), element.style.textShadow.blur);
    },
    setTextShadowColor: function(element, value) {
        element.style.textShadow.color = util.isBlank(value) ? '#000000FF' : util.rgbaToHexColor(value);
    }
};

export default attribute;